<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="css/'swiper.css" type="text/css">
    </head>
    <body>
        <div class="swiper">
            <div class="imgList">
                <div class="imgItem active"  style="background-image: url(img/img/img1.webp);"></div>
                <div class="imgItem" style="background-image: url(img/img/img2.jpg);"></div>
                <div class="imgItem" style="background-image: url(img/img/img3.webp);"></div>
                <div class="imgItem" style="background-image: url(img/img/img4.webp);"></div>
                <div class="imgItem" style="background-image: url(img/img/img5.webp);"></div>
            </div>
            <div class="btnList">
                <div class="btn pre"><</div>
                <div class="btn next">></div>
            </div>
        </div>
        <script type="text/javascript">
                var preBtn = document.querySelector(".swiper .pre");
                var nextBtn = document.querySelector(".swiper .next");
                var imgListDivs = document.querySelectorAll(".imgItem");
                var currentImg = 0;
                console.log(imgListDivs);

                nextBtn.onclick = function(){
                    currentImg += 1;
                    if(currentImg>=imgListDivs.length){
                        currentImg = 0;
                    }
                    imgListDivs.forEach(function(item,i){
                        item.classList.remove("active");
                    })
                    imgListDivs[currentImg].classList.add("active");
                }

                preBtn.onclick = function(){
                    currentImg -= 1;
                    if (currentImg < 0) {
                        currentImg = imgListDivs.length - 1;
                    }
                    imgListDivs.forEach(function (item, i) {
                        item.classList.remove("active");
                    })
                    imgListDivs[currentImg].classList.add("active");
                }

        </script>
    </body>
</html>